<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="input-form">
      <form @submit="search" class="ui form">\
        <div class="field">
          <input v-model="keyword" type="text" placeholder="请输入职位">
        </div>
        <button class="ui button">搜索</button>
      </form>
    </div>
    <div id="positions" class="box">
        <table class="table">
            <thead>
                <th>编号</th>
                <th>公司名称</th>
                <th>薪水</th>
                <th>职位</th>
                <th>城市</th>
                <th>福利</th>
            </thead>
            <tbody>
                <tr v-for="position in positions" v-bind:key="position.id">
                    <td>{{ position.id }}</td>
                    <td>{{ position.companyName }}</td>
                    <td>{{ position.salary }}</td>
                    <td>{{ position.positionName }}</td>
                    <td>{{ position.city }}</td>
                    <td>{{ position.positionAdvantage }}</td>
                </tr>
            </tbody>
        </table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      positions: [],
      keyword: ''
    }
  },
  methods: {
    search(evt) {
      evt.preventDefault();
      this.positions = [];
      console.log(this.keyword);
      var _this = this;
      axios.get('/es/search', { params: {
          "keyword": _this.keyword,
          "queryName": "positionName",
          "pageNo": 1,
          "pageSize": 10
        }
      }).then(response => {
        _this.positions = response.data;

        var diff = 5 - _this.positions.length;
        if (diff > 0) {
            axios.get('/es/search', { params: {
            "keyword": '美女多员工福利好',
            "queryName": "positionAdvantage",
            "pageNo": 1,
            "pageSize": diff
          }
          }).then(response => {
            for (var i=0; i<response.data.length; i++) {
              console.log(response.data[i]);
              _this.positions.push(response.data[i]);
            }
          }).catch(err => {
            console.log(err);
          });
        }
      }).catch(err => {
        console.log(err);
      });
    
    }


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
